<template>
  <div class="app-container">
    <el-card>
      <div style="text-align: center">
        <h1>{{ title }}</h1>
        <h4>开始时间：{{ startTime }}</h4>
        <h4>结束时间：{{ endTime }}</h4>
        <el-button v-if="exist===0" type="primary" @click="goContestDetails">参与竞赛</el-button>
        <el-button v-if="exist===1" type="success" @click="goContestDetails">开始答题</el-button>
      </div>
      <h3>竞赛描述：</h3>
      <mavon-editor
        :value="description"
        class="mavon-editor"
        :subfield="false"
        :default-open="'preview'"
        :editable="false"
        :toolbars-flag="false"
        :ishljs="true"
      />
    </el-card>
    <el-dialog
      title="参与竞赛"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="form">
        <el-form-item label="竞赛密码">
          <el-input v-model="form.password" autocomplete="off" type="password" placeholder="请输入密码以参与竞赛" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addContestUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { loginMessage } from '@/utils/login-message'
import { getUserId } from '@/utils/auth'
import { addContestUser, contestById } from '@/api/contest'

export default {
  components: { mavonEditor },

  data() {
    return {
      contestId: '',
      title: '这是一个标题',
      description: '见底部脚注[^hello]\n' +
        '\n' +
        '[^hello]: 一个注脚\n' +
        '\n' +
        '## 表情(emoji)\n' +
        '[参考网站: https://www.webpagefx.com/tools/emoji-cheat-sheet/](https://www.webpagefx.com/tools/emoji-cheat-sheet/)\n',
      startTime: '2021-04-21 00:00:00',
      endTime: '2021-04-21 00:00:00',
      exist: 0,
      privilege: 1,
      form: {
        password: ''
      },
      dialogFormVisible: false
    }
  },
  created() {
    if (this.$route.query.contestId === undefined) {
      this.$message.warning('出错了，请稍后再试')
      this.$router.back()
    } else {
      this.contestId = this.$route.query.contestId
      this.contestById()
    }
  },
  methods: {
    contestById() {
      contestById({ contestId: this.contestId, userId: getUserId() }).then(res => {
        this.description = res.data.description
        this.startTime = res.data.startTime
        this.endTime = res.data.endTime
        this.exist = res.data.exist
        this.privilege = res.data.privilege
        this.title = res.data.title
      })
    },
    goContestDetails() {
      if (loginMessage()) {
        return
      }
      if (this.exist === 0) {
        if (this.privilege === 1) {
          this.dialogFormVisible = true
        } else {
          this.addContestUser()
        }
      } else {
        this.goDetails()
      }
    },
    goDetails() {
      this.$router.push({
        path: '/contest/details',
        query: { contestId: this.contestId }
      })
    },
    addContestUser() {
      const formData = new FormData()
      formData.set('contestId', this.contestId)
      formData.set('userId', getUserId())
      formData.set('password', this.form.password)
      addContestUser(formData).then(res => {
        if (res.data) {
          this.dialogFormVisible = false
          this.$message.success('参加竞赛成功，自动进入竞赛')
          this.contestById()
          setTimeout(() => {
            this.goDetails()
          }, 1000)
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
